<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    /*********设置基础样式，格式化********/
        p,ul,li,ol,h1,h2,h3,h4,h5,h6{
            padding:0;
            margin:0;
        }
        ul,li{
            list-style: none;
        }
        a{
            text-decoration: none;
            color:#434744;
        }
        img{
            vertical-align: bottom;
        }
        .clear::after{
            content:"";
            display:block;
            clear:both;
        }
/*******格式化结束*******/

    /*最外层div的样式*/
        #container{
            width:1020px;
            margin:0 auto;
            height:auto;
            background: #aaa;
            overflow: hidden;
        }
        #container>.first{
            margin-left:-20px;
        }
        /*清除浮动对#container的影响*/

    /*---start---第一个盒子，图片效果*/
    /*图片显示的盒子另外还是个a标签*/
        .show{
            /*display: block;可有可无*/
            float:left;
						overflow: hidden;
            margin-left:20px;
            margin-top: 20px;
            border-radius: 10px;
            width: 500px;
            height: 313px;
						z-index:1;
            text-align: center;
            color:#fff;
        }
        .show>.imgShow{
            width:100%;
            height:100%;
/*            z-index: 2;*/
            overflow: hidden;
        }
        .show>.imgShow>img{
            width:100%;
            height:100%;
            transition:all .5s  linear;
        }
        .first>.show>.word{
            position:relative;
            width: 100%;
            height: 100%;
            text-shadow: 0 1px 2px #000;
/*            z-index:2;*/
            margin-top:-313px;
            transition:all .5s  linear;
        }
        .word>h2{
            padding-top:120px;
        }
        .word>h3{
            padding-top:20px;
        }
        #container>.first>.show:hover img{
            transform: scale(1.1);
        }
        #container>.first>.show:hover .word{
            background-color: rgba(0,0,0,0.3);
        }
    /*---end---第一个盒子，图片效果*/


    /*---start---第二个盒子，分页效果*/
    .page{
        width:1020px;
        margin:0 auto;
        padding-top:30px;
				text-align: center;
    }
    .pageCount{
        margin:0 auto;	
    }
		.pageCount a{
			display: inline-block; 
			padding: 5px 11px;
		}
    .page>.pageCount>.pageItem{
        border-radius: 50%;
    }
    .page>.pageCount>a.active{
        background: #14ea46;
        color: #fff;
    }
		.page>.pageCount>.prev,.page>.pageCount>.next{
			background:#009fff;
			border-radius:5px;
			color:#fff;
		}
		.page>.pageCount>.prev{
			margin-right:5px;
		}
		.page>.pageCount>.next{
			margin-left:5px;
		}
		.page>.pageCount>.prev.disabled,.page>.pageCount>.next.disabled{
			background:#f0f;
		}
    /*---end---第二个盒子，分页效果*/
    </style>
</head>
<body>
    <div id="container">
        <div class="first clear">
            <!--<a href="#" class="show">
                <div class="imgShow">
									<img src="img/1.jpg" alt=""> 
								</div>
                <div class="word">
                    <h2>武汉最美赏花地</h2>
                    <h3>
                        =&nbsp;
                        <span>花开满江城</span>
                        &nbsp;=
                    </h3>
                </div>
							</a>-->
        </div>
    </div>
    <div class="page">
        <ul class="pageCount clear">
					<!-- <li class="prev"><a href="#">上一页</a></li> -->
					<!-- <li class="pageItem active"><a href="#">1</a></li> -->
					<!-- <li class="pageItem"><a href="#">2</a></li> -->
					<!-- <li class="pageItem"><a href="#">3</a></li> -->
					<!-- <li class="pageItem"><a href="#">4</a></li> -->
					<!-- <li class="next"><a href="#">下一页</a></li> -->
        </ul>
    </div>
    <script src="js/jquery.js"></script>
    <!--<script src="js/1.js"></script>-->
    <script src="js/goWhere.js"></script>
</body>
</html>